<template>
  <div class="mapDiv">
    <div class="aslider_s">
      <div class="asliderStyle">
        <div class="leftDiv"> </div>
        <div class="rightDiv">
          <ul>
            <li v-for="(item, index) in components" :key="index" @click="selectComponent(item, index)" >
              <div :style="{ 'background-image': item.selected ? 'url(' + selectedImageUrl + ')' : 'url(' + imageUrl + ')' }" :class="{ 'selected': selectedIndex === index }">
                <img :src="getImgSrc(index)" alt="">
                <span>{{ item.name }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="allDiv">
      <component :is="currentComponent"></component>
    </div>
    <div class="bottomS"></div>
  </div>
</template>

<script>


import mapz from "./mapz.vue";
import luans from "./luans.vue";
import diaodu from "./diaodu.vue";
import yuny from "./yuny.vue";
import shes from "./shes.vue";
import total from "./total.vue";
import set from "./set.vue";
import imageUrl from '../../assets/images/ullib.png';
import selectedImageUrl from '../../assets/images/ullil.png';

export default {
  name: "Index",
  components:{
    mapz,luans,diaodu,yuny,shes,total,set
  },
  data() {
    return {

      selectedIndex:0,
      currentComponent: mapz, // 初始选中项索引
      imageUrl:imageUrl,
      selectedImageUrl:selectedImageUrl,
      components: [ // 组件选项
        { name: '综合管理', component: 'mapz', selected: true },
        { name: '数字孪生', component: 'luans', selected: true },
        { name: '智慧调度', component: 'diaodu', selected: false },
        { name: '智慧运营', component: 'yuny', selected: false },
        { name: '设施管理', component: 'shes', selected: false },
        { name: '统计分析', component: 'total', selected: false },
        { name: '知识管理', component: 'luans', selected: false },
        { name: '智慧打印', component: 'luans', selected: false },
        // { name: '系统设置', component: 'set', selected: false },
        // 添加其他组件选项
      ],
      imageUrls: [
        '../../assets/images/x1.png',
        '../../assets/images/x2.png',
       '../../assets/images/x3.png',
        '../../assets/images/x4.png',
        '../../assets/images/x5.png',
        '../../assets/images/x6.png',
        '../../assets/images/x6.png',
        '../../assets/images/x6.png',
      ],

    };
  },

  mounted() {


  },
  methods: {




    selectComponent(item, index) {
      // 将当前选中的组件设置为选中项
      this.currentComponent = item.component;
      this.selectedIndex = index;
      // 更新选中状态
      this.components.forEach((component, idx) => {
        component.selected = idx === index;
      });
    },
    getImgSrc(index) {
      return this.imageUrls[index];
    },

    switchToImageMap() {
      // this.map.removeLayer(this.tdtVecLayer);
    },
    switchToVectorMap() {
      // this.map.removeLayer(this.tdtImgLayer);
      // this.tdtVecLayer.addTo(this.map);
    }

  }
};
</script>

<style scoped lang="scss">
  .mapDiv{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    .aslider_s{
      position: absolute;
      z-index: 333;
      width: 15%;
      height: 93%;
      background-color: #001C34;
      opacity: 0.9;
      top: 7%;
    }
    .allDiv{

      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 111;

    }
    .bottomS{
      position: absolute;
      bottom: 0;
      z-index: 999;
      width: 100%;
      height: 3.5rem;
      opacity: 0.8;
      background-image: url("../../assets/images/bottom.png");
      background-size: cover; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      margin: 0; /* 去除默认的外边距 */
      padding: 0; /* 去除默认的内边距 */
    }

    .asliderStyle{
      font-size: 1rem;
      height: 98%;
      display: flex;


      .leftDiv{
        width: 8%;
        height: 97%;
        background-image: url("../../assets/images/leftimg.png");
        background-size: cover; /* 背景图片铺满并保持比例不变 */
        background-repeat: no-repeat; /* 不重复平铺 */
        background-position: center; /* 图片居中对齐 */
        margin: 0; /* 去除默认的外边距 */
        padding: 0; /* 去除默认的内边距 */

      }
      .rightDiv{
        width: 92%;
        height: 100%;
        padding: 1rem 0rem 0 3rem;
        overflow: hidden;
      }


      ul {
        list-style-type: none;  /* 设置列表项的符号为无 */
        padding: 0;  /* 去除默认的内边距 */
        li{
          margin-top: 4rem;
          cursor: pointer;
          div{
            width: 18rem;
            height: 2rem;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 1.3rem;
            color: #90B7D3;
            line-height: 33px;
            text-align: left;
            font-style: normal;
            position: relative;
            background-size: cover; /* 背景图片铺满并保持比例不变 */
            background-repeat: no-repeat; /* 不重复平铺 */
            background-position: center; /* 图片居中对齐 */
            margin: 0; /* 去除默认的外边距 */
            padding: 0; /* 去除默认的内边距 */
            img{
              width: 2rem;
              position: absolute;
              top: -0.8rem;
              left: 1rem;
            }
            span{
              position: absolute;
              top: -1rem;
              left: 4rem;
            }
          }
          .selected {
            color: white;
            font-size: 1.5rem!important;
          }
        }
      }
    }
  }
</style>

